
<html>
<head>
<meta charset="UTF-8">
<title>大作战</title>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/style.css?v=4"/>
<style>
	/* -- 浮动 --  */
	
	.cf::after,
	.cf::before {
		content: " ";
		display: table;
	}
	
	.cf::after {
		clear: both;
	}
	
	.fl {
		float: left;
	}
	
	.fr {
		float: right;
	}
	.flex{
		display: flex;
	}
	.scorebar{
		padding: 5px;
		color: white;
		width: 100vw;
		background-color: #2A2A2A;
	}
	.timeb{
		margin-right: 20px;
	}
	.tip{
		display: none;
		color: #FFFFFF;
		font-size: 30px;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 999;
	}
	.timeout{
		text-align: center;
		color: red;
		line-height: 100vh;
		background: rgba(0, 0, 0, .5);
	}
	.playSound{
		background: url("./images/mute_35x35.png") no-repeat scroll 0 0px transparent; 
		width: 2.1875rem;
		height: 2.1875rem;
		border: none;
	}
	.playSoundNot{
		background: url("./images/mute_35x35.png") no-repeat scroll -35px 0px transparent; 
		width: 2.1875rem;
		height: 2.1875rem;
		border: none;
	}
	.align-center{
		align-items: center;
	}
	#ul1{
		margin-top: 6.25rem;
	}
</style>
</head>

<body>
<div class="cf scorebar">
	<div class="fl">
		<span>得分：</span>
		<span id="socreContainer">0</span>
	</div>
	<div class="fr timeb flex align-center">
		<span onclick="">剩余时间：</span>
		<span id="timeContainer">0</span>
		<button id="playSound" class="playSound" onclick="playSound()"></button>
	</div>
</div>
<ul id="ul1"></ul>
<div class="tip">
	<div class="timeout">时间到了</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/howler.min.js"></script>
<script type="text/javascript" src="js/index.js?v=2"></script>
<script>
    var sound = new Howl({
      src: ['./images/s_background.ogg'],
	  loop: true,
    });
	var doPlay = false;
	function playSound(){
		doPlay = !doPlay;
		if(doPlay){
			sound.play();
			$("#playSound").addClass("playSound") .removeClass("playSoundNot")
		}else{
			sound.stop();
			$("#playSound").addClass("playSoundNot") .removeClass("playSound");
		}
	}
	$("#playSound").click();
</script>
</body>
</html>
